<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="/SecureCredit/css/smoothness/jquery-ui-1.8.15.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/SecureCredit/css/ui.jqgrid.css" />
 
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
 
<script src="/SecureCredit/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="/SecureCredit/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/SecureCredit/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(function(){ 
  $("#list").jqGrid({
    url:'/SecureCredit/searchCreditCards.sc',
    editurl:'/SecureCredit/editCreditCards.sc',
    datatype: 'json',
    mtype: 'GET',
    colNames:['ID','Card Number', 'Name On Card','Card Type','Four Digits','Expiration Date'],
    colModel :[ 
      {name:'id', index:'id', width:55}, 
      {name:'creditCardNumber', index:'creditCardNumber', width:90}, 
      {name:'nameOnCard', index:'nameOnCard', width:80}, 
      {name:'cardType', index:'cardType', width:80}, 
      {name:'fourDigits', index:'fourDigits', width:80}, 
      {name:'expirationDate', index:'expirationDate', width:150} 
    ],
    jsonReader : {
        root:"rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        id: "0"
     },
    pager: '#pager',
    rowNum:15,
    rowList:[10,15,20],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    caption: 'Credit Cards'
  }); 
}); 
</script>

 
</head>
<body>
 
<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 

 
</body>
</html>